<template>
  <div class="member-recruit">
    <div class="title">小组活动签到表</div>
    <a-form-model layout="horizontal" ref="ruleForm" :model="form" :labelCol="{span: 7}" :wrapperCol="{span: 9}">
      <a-form-model-item label="活动名称">
        <a-input v-model="activityDetail.activityName" disabled></a-input>
      </a-form-model-item>
      <a-form-model-item label="小组编号">
        <a-input v-model="activityDetail.activityCode" disabled></a-input>
      </a-form-model-item>
      <a-form-model-item label="负责社工">
        <a-input v-model="activityDetail.workPlan" disabled></a-input>
      </a-form-model-item>
      <a-form-model-item label="参与志愿者">
        <a-input v-model="activityDetail.workPlan" disabled></a-input>
      </a-form-model-item>
      <a-row>
        <a-col :span="7">
          <div class="required">签到表：</div>
        </a-col>
        <a-col :span="15">
          <a-table :columns="columns" :data-source="form.attendanceData" :pagination="false">
            <template slot="signComment" slot-scope="text, record, index">
              <a-form-model-item :wrapperCol="{span: 24}">
                <a-input v-if="record.isEdit" v-model="form.attendanceData[index].signComment" />
                <template v-else>
                  {{ text }}
                </template>
              </a-form-model-item>
            </template>
            <template v-for="(item, index) in tableHeadData" slot="checkbox" slot-scope="text, record, index">
              <a-form-model-item :wrapperCol="{span: 24}" :key="index">
                <a-checkbox v-model="form.attendanceData[index].attendanceData[item.relateKey]" />
              </a-form-model-item>
            </template>
            <template slot="control" slot-scope="text, record, index">
              <div style="margin-bottom: 24px;">
                <a type="link" v-if="record.isEdit" @click="record.isEdit = false">保存</a>
                <a type="link" v-else @click="record.isEdit = true">编辑</a>
              </div>
            </template>
          </a-table>
          
        </a-col>
      </a-row>
    </a-form-model>
    <div class="btn" style="text-align: center;margin-top: 30px;">
      <a-button type="primary" style="margin-right: 15px;" @click="onSubmit">确定</a-button>
      <a-button type="info" @click="$router.back()">取消</a-button>
    </div>
  </div>
</template>

<script>
  import {
    attendanceDetail,
    save
  } from '@/api/sjsk/activity/group/detail/preparation/table3'
  export default {
    created() {
      this.getDetail()
      this.form.activityId = this.$route.query.id
    },
    data() {
      return {
        activityDetail: {
          activityName: '',
          activityCode: '',
          workPlan: '',
          workPlan: '',
        },
        form: {
          "activityId": 0,
          attendanceData: []
        },
        tableHeadData: []
      }
    },
    computed: {
      columns: function() {
        const list = [
          {
            title: '序号',
            
            width: 60,
            align: 'center',
            customRender: (text, record, index) => index +1 //序号分页后连续
          },
          {
            title: '名称',
            align: 'center',
            dataIndex: 'memberName',
          }
        ]
        this.tableHeadData.map(item => {
          list.push({
            title: item.headerName,
            width: 150,
            dataIndex: 'relateKey',
            scopedSlots: {
              customRender: 'checkbox'
            },
          })
        })
        
        list.push({
            title: '备注',
            width: 150,
            dataIndex: 'signComment',
            scopedSlots: {
              customRender: 'signComment'
            },
        })
        list.push({
            title: '操作',
            width: 150,
            scopedSlots: {
              customRender: 'control'
            },
        })
        return list
      },
    },
    methods: {
      
      getDetail() {
        attendanceDetail({
          activityId: this.$route.query.id
        }).then(res => {
          const {
            success,
            result
          } = res
          if (success) {
            this.activityDetail = result.activityDetail
            this.tableHeadData = result.attendanceDetail.periodHeaders
            if(result.attendanceDetail.attendanceData && result.attendanceDetail.attendanceData.length) {
              result.attendanceDetail.attendanceData.map(item => {
                item.isEdit = false
              })
            }
            this.form.attendanceData = result.attendanceDetail.attendanceData || []
          }
        })
      },
      handleOk() {},
      handleCancel() {},
      onSystemAdd() {
        this.systemPeopleShow = true
      },
      onHandlerAdd() {
        this.form.handlerMembers.push({
          isEdit: true,
          "activityId": this.$route.query.id,
          "memberAddr": "",
          "memberBirth": "",
          "memberGenre": 1,
          "memberIdentity": 1,
          "memberName": "",
          "memberPhoneNumber": "",
          "memberSource": null,
          "personType": null,
          "sjskOrSocialUserId": null,
          "sysUserId": "",
        })
        this.form = JSON.parse(JSON.stringify(this.form))
      },
      
      onSubmit() {
        save(this.form).then(res => {
          if(res.success) {
            this.$message.success('保存活动签到表成功')
            this.$router.replace('/activity/group/list')
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .member-recruit {
    padding: 20px;
    background-color: #fff;

    .required {
      text-align: right;

      &::before {
        content: '*';
        color: red;
        margin-right: 5px;
      }

    }

    .title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
    }

    .system-add {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      text-align: center;
      cursor: pointer;

      &:active {
        background-color: rgba(#000, .1);
      }
    }
  }
</style>
